<template>
  <el-dialog
    v-model="visible"
    title="页面样例"
    width="50%"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <div class="dialog-content">
      <slot name="content"></slot>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <slot name="footer">
          <el-button @click="visible = false">关闭</el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

// Dialog 可见性
const visible = ref<boolean>(false);

// 暴露给父组件调用
const open = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

defineExpose({ open, close });
</script>